<template>
  <!-- 直播观众分析 -->
  <div id="liveAudience">
    <div class="title box titone">观众性别分布</div>
    <div class="portrait" v-if="$store.state.userRoot[6][36].owner">
      <van-loading class="loading" v-if="loading" type="spinner" :vertical="true" />
      <div>
        <div class="second_hua box" v-show="pieGenderData.length">
          <GenderSpread :pieData="pieGenderData" v-if="pieGenderData" />
        </div>
        <div class="zanwu" v-if="!pieGenderData.length && !loading">
          <img src="@/assets/three/noData.png" />
          <p>暂无数据</p>
        </div>
        <div class="title box titone">观众年龄分布</div>
        <div class="second_echart" v-show="fansxData.length!=0">
          <BarChart :pieData="fansxData" pieName="粉丝年龄分布" v-if="fansxData" />
        </div>
        <div class="zanwu" v-if="!fansxData.length && !loading">
          <img src="@/assets/three/noData.png" />
          <p>暂无数据</p>
        </div>
      </div>
      <div class="title box" style="margin-top: .4rem;">观众来源分布</div>
      <van-loading class="loading" v-if="loading" type="spinner" :vertical="true" />
      <div class="source box" v-show="fansDiYu.length != 0">
        <BigPie :valueData="fansDiYu" v-if="fansDiYu" style="margin-top:.2rem;" />
      </div>
      <div class="zanwu" v-show="fansDiYu.length == 0 && !loading" style="padding:1rem 0;">
        <img src="@/assets/three/noData.png" />
        <p>暂无数据</p>
      </div>
    </div>
    <!-- <noPower v-else :bg="'https://sf6-ttcdn-tos.pstatp.com/img/temai/e2797a315ea86dd81f757246ad696efedbb5263dwww800-800~tplv-resize:200:0.jpeg'" /> -->
    <noPower :minLeve="$store.state.userRoot[6][36].ownerMinLevel" v-else />
  </div>
</template>

<script>
import GenderSpread from '@/component/GenderSpread.vue';
import BarChart from '@/component/BarChart.vue';
import BigPie from '@/component/BigPie';
export default {
  props: {},
  data() {
    return {
      pieGenderData: '',
      fansxData: '',
      fansDiYu: '',
      loading: false,
      isshow: true
    };
  },
  components: { GenderSpread, BarChart, BigPie },
  computed: {},
  created() {
    this.getFansPortrait();
  },
  mounted() {},
  watch: {},
  methods: {
    // 获取--观众画像
    getFansPortrait() {
      this.loading = true;
      this.$axios
        .get('api/live/analysis', {
          params: {
            roomId: this.$route.query.room_id
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.loading = false;
            this.pieGenderData = res.data.data.fansSexList;
            this.fansxData = res.data.data.fansAgeList;
            this.fansDiYu = res.data.data.fansFrom;
          } else if (res.data.code == 1003) {
            this.isshow = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="less" scoped>
#liveAudience {
  // height: 100vh;
  .box {
    width: 9.2rem;
    margin: 0 auto;
  }
  .title {
    position: relative;
    font-size: 0.4rem;
    color: #222;
    font-weight: 600;
    padding-left: 0.2rem;
  }
  .title::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 0.08rem;
    height: 0.3733rem;
    background-color: #fd7f2c;
    border-radius: 0.1333rem;
  }
  .titone {
    margin: 0.6933rem 0.4rem 0;
  }
  .second_hua {
    width: 100%;
    height: 1.26rem;
    padding-top: 0.4rem;
    margin-bottom: 0.5rem;
  }
  .second_echart {
    width: 100%;
    height: 4.4533rem;
    margin-top: .1rem;
  }
  .source {
    width: 100%;
    height: 5rem;
    margin-bottom: 1.62rem;
  }
  //   暂无数据
  .zanwu {
    width: 5.3333rem;
    height: 4rem;
    margin: 0.8rem auto 0.2rem auto;
    img {
      margin: 0 auto;
      width: 4rem;
      height: 3.2rem;
      display: block;
    }
    p {
      font-size: 0.3467rem;
      line-height: 0.4rem;
      color: #888;
      text-align: center;
    }
  }
}
</style>
